import React from 'react';
import { PlayCircleOutlined, PauseCircleOutlined } from '@ant-design/icons';

export default function PlayButton({ hasPlayed, clickHandle }) {
    let button;
    if (hasPlayed) {
        button = <PauseCircleOutlined />
    } else {
        button = <PlayCircleOutlined />
    }

    return (
        <div style={{
            fontSize: '42px',
            color: '#fff'
        }} onClick={clickHandle}>
            { button }       
        </div>
    );
}